import React, { useEffect, useState } from 'react';
import banner from '@/config/img/banner.png';
import { useHistory } from 'umi';
import { peopleList, historyList } from './index.config';
import { CSSTransition } from 'react-transition-group';
import './index.less';
export default function index() {
  const history = useHistory();
  const [isVisible, setIsVisible] = useState(false);
  const handleScroll = () => {
    const scrollPosition = window.scrollY;
    console.log(scrollPosition);

    scrollPosition > 110 && setIsVisible(true);
  };
  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  return (
    <div className="history">
      <div className="history-banner">
        <img src={banner} alt="" />
      </div>
      <CSSTransition
        in={isVisible} // 控制动画是否开始，true 表示开始动画
        timeout={3000} // 动画过渡的时间，单位毫秒
        classNames="fade" // 指定动画的 class 名称
        unmountOnExit // 动画退出时卸载组件
      >
        <div className="history-time-line">
          <div
            className="time-line-title"
            onClick={() => {
              history.push('/history/develop');
            }}
          >
            历史起源
          </div>
          <div className="time-line-content">
            <div className="ins">
              {historyList.map((val) => {
                return (
                  <div className="content-item">
                    <div className="item-title">{val.title}</div>
                    <div className="item-line"></div>
                    <img src={val.img} alt="" />
                    <div className="item-saml-title">{val.title}</div>
                    <div className="item-desc">{val.desc}</div>
                  </div>
                );
              })}
              <div className="line"></div>
            </div>
          </div>
        </div>
      </CSSTransition>
      <div className="history-people">
        <div className="history-people-title">雷剧人</div>
        <div className="people-content">
          {peopleList.map((val, index) => {
            return (
              <div
                className="content-item"
                key={index}
                onClick={() => {
                  history.push({
                    pathname: '/history/person',
                    query: {
                      id: val.id,
                    },
                  });
                }}
              >
                <img src={val.img} alt="" />
                <div className="item-name">{val.name}</div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
